<template>
    <div class="wrapper">
        <div class="wrapper__search">
            <div class="wrapper__search__back iconfont" @click="handleBackClick">&#xe697;</div>
            <div class="wrapper__search__content">
                <div class="wrapper__search__content__icon iconfont">&#xe741;</div>
                <input class="wrapper__search__content__input" placeholder="请输入商品名称" />
            </div>
        </div>
        <ShopInfo :item= "item" :hideborder = "true" v-if="item.imgUrl"/>
        <Content :shopName="item.name" />
        <Cart />
    </div>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity'
import { useRouter, useRoute } from 'vue-router'
import ShopInfo from '../../components/ShopInfo.vue'
import Content from './Content.vue'
import Cart from './Cart.vue'
import { getShopItem } from '../../utils/http'

// 获取当前商户信息
const useShopInfoEffect = () => {
  const route = useRoute()
  const data = reactive({
    item: {}
  })
  const getData = async () => {
    const result = await getShopItem(route.params.id)
    data.item = result.data.data
  }
  return { ...toRefs(data), getData }
}
// 回退
const useBackRouterEffect = () => {
  const router = useRouter()
  const handleBackClick = () => {
    router.back()
  }
  return handleBackClick
}
export default {
  name: 'Shop',
  components: {
    ShopInfo,
    Content,
    Cart
  },
  setup () {
    const { item, getData } = useShopInfoEffect()
    const handleBackClick = useBackRouterEffect()
    getData()
    return {
      item,
      handleBackClick
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
    @import '../../style/viriable.scss';
    padding: 0 .18rem;
    &__search {
        margin: .14rem 0 .04rem 0;
        display: flex;
        &__back {
            width: .3rem;
            margin: auto;
            font-size: .25rem;
            color: #b6b6b6;
        }
        &__content {
            flex: 1;
            background: $search-bgColor;
            border-radius: .16rem;
            display: flex;
            &__icon {
                width: .44rem;
                font-size: .25rem;
                margin: auto;
                text-align: center;
                color: #b6b6b6;
            }
            &__input {
                display: block;
                width: 100%;
                padding-right: .2rem;
                flex: 1;
                border: none;
                outline: none;
                background: none;
                height: .32rem;
                color: #333;
                font-size: .14rem;
            }
            &__input::placeholder {
                color: #999;
            }
        }
    }
}
</style>
